<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-row>
    <el-col :span="8">
      <el-card>
        <div  v-infinite-scroll="load"style=" height:600px;overflow-y: auto ">
          <el-row>
            <el-col :span="24">
              <div class="search-bar">
                <el-input v-model="searchText" placeholder="请输入关键字 " class="search-input"></el-input>
                <el-select v-model="selectedCategory" placeholder="请选择分类" class="category-select">
                  <el-option label="技术教程" value="1"></el-option>
                  <el-option label="Bug问题" value="2"></el-option>
                  <el-option label="软件工具" value="3"></el-option>
                  <el-option label="吐槽专区" value="4"></el-option>
                </el-select>
                <el-button type="primary" @click="search" class="search-button">搜索</el-button>
              </div>
            </el-col>
            <el-col :span="24" >
              <div v-for="item in List" :key="item.id"   >
                <el-card class="card" :id="item.id" @click="show(item.id)">

                <div class="infinite-list-item">
                  <div slot="header" class="card-header" style="text-align: center">文章标题：{{ item.title }}</div>
                  <img :src="item.coverImg" class="card-img" alt="封面" style="width: 100%; height: 200px; object-fit: cover;">
                  <div class="card-content text">
                    {{ item.content }}
                  </div>
                  <el-text type="info">发布时间:{{new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).format(new Date(item.createTime))}}</el-text>
                </div>
              </el-card>
            </div></el-col> <!-- 添加了闭合标签 -->
          </el-row>

        </div>
      </el-card>

    </el-col>
    <el-col :span="16">
     <el-row>
       <el-col :span="24">
         <el-card style="width: 100%;height: 100%">
           <el-text id="showcontent"  v-model="defaultshow"  >
<h1>Xfee用户需知

</h1><br/>
             <el-text type="danger">作者张学东 shibaizhelianmeng@163.com</el-text>
<h5>{{defaultshow}}</h5>
   <el-text type="success">
  项目开源地址：https://gitee.com/tomdoger/Xfee
     <el-button type="info" size="small">
       <a target="view_window" href="https://gitee.com/tomdoger/Xfee">点击查看项目开源</a>
     </el-button>

   </el-text>
             <br/>
             <el-text type="info" size="large"> 内容还有很多不足 欢迎您完善 提交后 如果采纳还有现金奖励</el-text>
             <br/>
             <el-text type="info" size="large"> 邮箱：shibaizhelianmeng@163.com <el-button type="success" size="small" @click="mailsome1">联系我们</el-button></el-text>
           </el-text>

         </el-card>

       </el-col>

     </el-row>

    </el-col>
  </el-row>

</template>
<script setup>
import {ref, onUpdated, h, onMounted} from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import MarkdownIt from 'markdown-it';
const markdownIt = new MarkdownIt()
function mailsome1() {
  var who = prompt("请输入收件人邮箱: ", "shibaizhelianmeng@163.com");
  var what = prompt("输入主题: ", "请留下您的联系方式或者你要反馈的信息");
  if (confirm("你确定要向" + who + "发送主题为 " + what + "的邮件么?") == true) {
    parent.location.href = 'mailto:' + who + '?subject=' + what + '';
  }
}
const customRenderer = (source) => {
  return h('div', { innerHTML: markdownIt.render(source) });
};

let defaultshow = ref("" +
    "" +
    "感谢您使用Xfee论坛,更多文章请您点击查看！用户发布内容会定期审核,请您遵守中华人民共和国相关国家法律规定，用户发布信息违反相关法律规定,无论情节轻重，平台不承担责任，由用户个人承担,默认您同意并且承担法律责任！！" +
    "您在使用Xfee发文的过程中，包括编辑、使用文章标题、文章内容、文章摘要、文章图片、文章链接、文章视频，应遵守《中华人民共和国网络安全法》、《互联网信息服务管理办法》、《网络信息内容生态治理规定》等相关法律法规，不得包含如下法律、法规禁止的内容：\n" +
    "\n" +
    "1）违反宪法确定的基本原则，煽动抗拒或者破坏宪法、法律、行政法规实施；\n" +
    "\n" +
    "2） 危害国家统一、主权和领土完整，泄露国家秘密，危害国家安全，损害国家尊严、荣誉和利益，宣扬恐怖主义、极端主义；\n" +
    "\n" +
    "3）诋毁民族优秀文化传统，煽动民族仇恨、民族歧视，侵害民族风俗习惯、歪曲民族历史和民族历史人物，损害革命领袖、英雄烈士形象，伤害民族感情，破坏民族团结；\n" +
    "\n" +
    "4）煽动破坏国家宗教政策，宣扬宗教狂热，危害宗教和睦，伤害信教公民宗教感情，破坏信教公民和不信教公民团结，宣扬邪教、封建迷信；\n" +
    "\n" +
    "5）危害社会公德，扰乱社会秩序，破坏社会稳定，宣扬淫秽色情、赌博、吸毒，渲染暴力、恐怖，教唆犯罪或者传授犯罪方法；\n" +
    "\n" +
    "6）教唆、教授、组织他人进行违法乱纪活动，以非法民间组织名义活动的，宣传违法违规物品；\n" +
    "\n" +
    "7）侵害未成年人合法权益或者损害未成年人身心健康；\n" +
    "\n" +
    "8）侵犯他人隐私，侮辱或者诽谤他人，侵害他人合法权益；\n" +
    "\n" +
    "9）侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利；\n" +
    "\n" +
    "10）含有法律、行政法规、规章、条例以及任何具有法律效力之规范所限制或禁止的其它内容；\n" +
    "\n" +
    "11）地图表示不规范内容等等"
   )
let pageNu = ref(1);
let pageSiz = ref(4);
let List = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const total = ref();
const searchText = ref("");
const selectedCategory = ref();
let id = ref();
const showList = ref({});

const show = (id) => {
  const foundItem = List.value.find(s => s.id === id);
  foundItem ? showList.value = foundItem : null;
  const element = document.getElementById("showcontent");

  element.innerHTML = showList.value.content;
  return element;
};

const load = () => {
  if (loading.value || !hasMore.value) {
    return;
  }

  const pageNum = pageNu.value;
  const pageSize = pageSiz.value;
  loading.value = true;

  axios.get('/article', { params: { pageNum, pageSize } })
      .then(result => {
        List.value = [...List.value, ...result.data.data.items];
        total.value = result.data.data.total;
        pageNu.value++;
        hasMore.value = result.data.data.items.length === pageSize;
        console.log(result)
      })
      .catch(error => {
        ElMessage({
          type: 'warning',
          message: error.message
        });
      })
      .finally(() => {
        loading.value = false;
      });
};

const search = () => {
  axios.get("/article/bykey", {
    params: {
      keywords: searchText.value,
      allcategoryId: selectedCategory.value
    }
  }).then(result => {
    List.value = result.data.data;
    console.log(List);
    ElMessage({
      type: "success",
      message: "查询到了哦"
    });
  }).catch(error => {
    ElMessage({
      type: "warning",
      message: "查询失败"
    });
  });
};

</script>

<style scoped>
infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.infinite-list .card {
  width: 100%;
  margin-bottom: 20px;
}
.infinite-list .infinite-list-item {
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.search-bar {
  display: flex;


}

.search-input {
  flex: 1;
  margin-right: 10px;
}

.category-select {
  width: 120px;
  margin-right: 10px;
}

.search-button {
  width: 80px;
}
/* 美化滚动条 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.text {
  /* 超出10个字隐藏，之所以设置11em是因为省略号占一个位置 */
  width: 21em;
  overflow: hidden;
  /* 显示省略符号来代表被修剪的文本。 */
  text-overflow:ellipsis;
  /* 文本不换行 */
  white-space:nowrap;
}
</style>
